<template>
  <view>
    <uni-forms ref="form" :modelValue="dynamicFormData" :rules="dynamicRules">
      <uni-forms-item label="事件标题" required name="title">
        <uni-easyinput v-model="dynamicFormData.title" placeholder="请输入事件标题" />
      </uni-forms-item>
      <uni-forms-item label="时间" required name="time">
        <uni-datetime-picker
          type="time"
          v-model="dynamicFormData.time"
          placeholder="请选择时间"
          :clear-icon="false"
          :border="false"
        />
      </uni-forms-item>
      <uni-forms-item label="地点" required name="location">
        <uni-easyinput v-model="dynamicFormData.location" placeholder="请输入地点" />
      </uni-forms-item>
      <uni-forms-item label="日期" name="date">
        <uni-easyinput v-model="dynamicFormData.date" disabled />
      </uni-forms-item>
      <view v-for="(item,index) in dynamicFormData.domains" :key="item.id">
        <uni-forms-item :label="item.label+' '+(index+1)" required
          :rules="[{'required': true,errorMessage: '必填'}]"
          :name="['domains',index,'value']">
          <view class="form-item">
            <uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入" />
            <button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
          </view>
        </uni-forms-item>
      </view>
      <button class="button" size="mini" type="primary" @click="add">添加域名项</button>
      <view style="margin-top: 32rpx;">
        <button type="primary" @click="submit('form')">提交</button>
      </view>
    </uni-forms>
  </view>
</template>

<script>
export default {
	data() {
		return {
			// 数据源
			dynamicFormData: {
				title: '',
				time: '',
				location: '',
				email: '',
				domains: [],
				date: ''
			},
			// 规则
			dynamicRules: {
				title: {
					rules: [{
						required: true,
						errorMessage: '事件标题不能为空'
					}]
				},
				time: {
					rules: [{
						required: true,
						errorMessage: '时间不能为空'
					}]
				},
				location: {
					rules: [{
						required: true,
						errorMessage: '地点不能为空'
					}]
				},
				email: {
					rules: [{
						required: true,
						errorMessage: '邮箱不能为空'
					}, {
						format: 'email',
						errorMessage: '邮箱格式错误'
					}]
				}
			}
		}
	},
	onLoad(options) {
		// 获取传递过来的日期参数
		if (options && options.date) {
			this.dynamicFormData.date = options.date
		}
	},
	methods: {
		// 新增表单域
		add() {
			this.dynamicFormData.domains.push({
				label: '域名',
				value:'',
				id: Date.now()
			})
		},
		// 删除表单域
		del(id) {
			let index = this.dynamicFormData.domains.findIndex(v => v.id === id)
			if (index !== -1) {
				this.dynamicFormData.domains.splice(index, 1)
			}
		},
		// 提交
		submit(ref) {
			this.$refs[ref].validate((err,value)=>{
				if (!err) {
					// 保存到本地
					let schedules = uni.getStorageSync('schedules') || [];
					// 若已存在同日期则覆盖
					const idx = schedules.findIndex(item => item.date === this.dynamicFormData.date);
					if (idx !== -1) {
						schedules[idx] = {...this.dynamicFormData};
					} else {
						schedules.push({...this.dynamicFormData});
					}
					uni.setStorageSync('schedules', schedules);
					uni.showToast({title:'保存成功',icon:'success'});
					setTimeout(()=>{
						uni.switchTab ? uni.switchTab({url:'/pages/index/index'}) : uni.navigateBack();
					}, 800);
				}
			})
		},
	}
}
</script>